<template>
        <div class="msg">
            <div class="myPhoto">
                <div class="left">
                    <img :src="photo" alt="" @click="funLogin">
                    <div class="idMsg">
                        <p class="petname">{{ petName }}</p>
                        <p class="username">{{ userName }}</p>
                    </div>
                </div>
                <div class="right">
                    <img src="https://gw.alicdn.com/imgextra/i4/O1CN017YkEcW1bj2xKGqX6R_!!6000000003500-2-tps-66-66.png" alt="">
                </div>
            </div>
            <div class="sort">
                <div class="srcBox">
                    <div @click="funCollect">
                        <img src="https://gw.alicdn.com/imgextra/i4/O1CN01Ch0s7Q23bXfqHh0du_!!6000000007274-2-tps-96-96.png" alt="">
                        <p>收藏</p>
                    </div>
                    <div>
                        <img src="https://img.alicdn.com/imgextra/i3/O1CN01kM35wj1F5Gx4IZpi5_!!6000000000435-2-tps-96-96.png" alt="">
                        <p>订阅店铺</p>
                    </div>
                    <div>
                        <img src="https://img.alicdn.com/imgextra/i1/O1CN018wxIjC25ghKrPUb39_!!6000000007556-2-tps-96-96.png" alt="">
                        <p>足迹</p>
                    </div>
                </div>
            </div>
            <div class="form">
                <div class="content">
                    <div class="top">
                        <p>我的订单</p>
                        <aside>
                            <p>全部</p>
                            <img src="https://gw.alicdn.com/imgextra/i2/O1CN011CwY3T1s01USC5UrY_!!6000000005703-2-tps-30-30.png" alt="">
                        </aside>
                    </div>
                    <div class="bottom">
                        <div>
                            <img src="https://gw.alicdn.com/imgextra/i4/O1CN01Ch0s7Q23bXfqHh0du_!!6000000007274-2-tps-96-96.png" alt="">
                            <p>待付款</p>
                        </div>
                        <div>
                            <img src="https://img.alicdn.com/imgextra/i4/O1CN01nLQgHT25pOrLRDa0J_!!6000000007575-2-tps-96-96.png" alt="">
                            <p>待发货</p>
                        </div>
                        <div>
                            <img src="https://img.alicdn.com/imgextra/i3/O1CN01nax4oQ1mZqiHhCthD_!!6000000004969-2-tps-96-96.png" alt="">
                            <p>待收货</p>
                        </div>
                        <div>
                            <img src="https://img.alicdn.com/imgextra/i2/O1CN017zJwGl1Pg2uGVpNQd_!!6000000001869-2-tps-96-96.png" alt="">
                            <p>待评价</p>
                        </div>
                        <div>
                            <img src="https://img.alicdn.com/imgextra/i2/O1CN01r5ZgMY1StHCKteW88_!!6000000002304-2-tps-96-96.png" alt="">
                            <p>退款/售后</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tool">
                <p class="mytool">我的工具</p>
                <div class="tools">
                    <div @click="funSer">
                        <img src="https://gw.alicdn.com/imgextra/i3/O1CN011LwFHp1KzfsNdSC6i_!!6000000001235-2-tps-76-76.png" alt="">
                        <p>官方客服</p>
                    </div>
                    <div>
                        <img src="https://gw.alicdn.com/imgextra/i1/O1CN01l4vVKs1LiYf4PCH6t_!!6000000001333-2-tps-120-120.png" alt="">
                        <p>试用领取</p>
                    </div>
                    <div>
                        <img src="https://gw.alicdn.com/imgextra/i2/O1CN01HW4fU627T4pOU9aMZ_!!6000000007797-2-tps-120-120.png" alt="">
                        <p>店铺会员</p>
                    </div>
                </div>
            </div>
            <!-- <img src="https://gw.alicdn.com/imgextra/i4/O1CN012DU3zm1HLQDgnE61A_!!6000000000741-0-tps-750-502.jpg_.webp" alt=""> -->
        </div>

</template>

<script>
export default {
    name:"selfMsg",
    data(){
        return {
            photo:"https://gw.alicdn.com/sns_logo/TB1ZbSH4AL0gK0jSZFtXXXQCXXa-240-240.png_120x120.jpg_.webp",
            petName:"我的淘宝昵称",
            userName:"账号名称"
        }
    },
    methods:{
        funCollect(){
            this.$router.push("/collect")
        },
        funLogin(){
            if(!localStorage.getItem("token")){
                this.$router.push("/loginCode").catch(err=>{})
            }
        },
        funSer(){
            this.$router.push({
                path:"/CustomerPage",
                query:{
                    flag:true
                }
            }).catch(err=>{})
        }
    }

}
</script>

<style lang="scss" scoped>
    .msg {
        width: 100%;
        height: 7.45rem;
        background: url("https://gw.alicdn.com/imgextra/i4/O1CN012DU3zm1HLQDgnE61A_!!6000000000741-0-tps-750-502.jpg_.webp") no-repeat center / 100% 7.45rem;
    }
    // .msg>img {
    //     width: 100%;
    //     height: 7.45rem;
    //     position: absolute;
    //     top: 0;
    // }
    .msg .myPhoto {
        width: 6.9rem;
        height: 1.66rem;
        margin: auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .msg .myPhoto .left {
        display: flex;
    }
    .msg .myPhoto .left img {
        width: 1.2rem;
        height: 1.2rem;
        
    }
    .msg .myPhoto .left .idMsg {
        margin-left: 0.25rem;
    }
    .msg .myPhoto .left .idMsg .petname {
        color: #000000;
        font-size: 0.36rem;
        font-weight: bold;
        margin-bottom: 0.16rem;
    }
    .msg .myPhoto .left .idMsg .username {
        color :#9e9f9d;
        font-size: 0.24rem;
    }
    .msg .myPhoto .right {
        width: 0.76rem;
        height: 1.02rem;
    }
    .msg .myPhoto .right img{
        width: 0.4rem;
        height: 0.4rem;
        margin-left: 0.36rem;
    }
    .msg .sort {
        width: 100%;
        height: 0.91rem;
        margin-bottom: 0.22rem;
    }
    .msg .sort .srcBox {
        width: 5.56rem;
        height: 100%;
        margin: auto;
        display: flex;
        justify-content: space-between;
    }
    .msg .sort .srcBox div {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
    }
    .msg .sort .srcBox div img {
        width: 0.5rem;
        height: 0.5rem;
    }
    .msg .sort .srcBox div p {
        color: #111111;
        font-size: 0.26rem;
    }
    .msg .form {
        width: 7.26rem;
        height: 2.11rem;
        background: #fff;
        border-radius: 0.26rem;
        margin: 0 auto 0.18rem;
        overflow: hidden;
    }
    .msg .form .content {
        width: 6.94rem;
        height: 1.56rem;
        margin: 0.27rem auto 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

    }
    .msg .form .content .top {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .msg .form .content .top>p {
        font-weight: bold;
        font-size: 0.32rem;
        color: #111111;
    }
    .msg .form .content .top aside {
        display: flex;
        width: 0.7rem;
        justify-content: space-between;
        align-items: center;
    }
    .msg .form .content .top aside p {
        font-size: 0.24rem;
        color: #999999;
    }
    .msg .form .content .top aside img {
        width: 0.12rem;
        height: 0.16rem;
    }
    .msg .form .content .bottom {
        width: 6.63rem;
        height: 1.23rem;
        display: flex;
        justify-content: space-between;
        margin-left: 0.3rem;
    }
    .msg .form .content .bottom div {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .msg .form .content .bottom div img {
        width: 0.75rem;
        height: 0.7rem;
    }
    .msg .tool {
        width: 7.25rem;
        height: 2.42rem;
        border-radius: 0.26rem;
        background: #fff;
        margin: auto;
        overflow: hidden;
    }
    .msg .tool .mytool {
        margin-top: 0.28rem;
        margin-left: 0.16rem;
        margin-bottom: 0.2rem;
        font-size: 0.3rem;
        color: #111111;
        font-weight: bold;
    }
    .msg .tool .tools {
        display: flex;
        margin-left: 0.38rem;
        width: 5.2rem;
        justify-content: space-between;
    }
    .msg .tool .tools div {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .msg .tool .tools img {
        width: 0.7rem;
        height: 0.7rem;
    }
</style>